<template>
  <div
    class="sidebar-container"
    :class="{ collapsed: isCollapse }"
  >
    <!-- 标题区域 -->
    <div
      class="title-container"
      v-show="!isCollapse"
    >
      <h1 class="system-title">CC-VIDEO 客服审核平台</h1>
    </div>

    <!-- 菜单区域 -->
    <el-menu
      :default-active="route.path.replace('/', '')"
      class="sidebar-menu"
      :collapse="isCollapse"
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#409EFF"
      :router="true"
    >
      <el-menu-item index="log">
        <el-icon><Notebook /></el-icon>
        <span>处理日志</span>
      </el-menu-item>

      <!-- 举报处理 -->
      <el-menu-item
        v-if="userState.getUserRoles?.includes(role.customer_service)"
        index="report"
      >
        <el-icon><Edit /></el-icon>
        <span>举报处理</span>
      </el-menu-item>

      <!-- 视频审核 -->
      <el-menu-item
        v-if="userState.getUserInfo.roles?.includes(role.audit_admin)"
        index="videoAudit"
      >
        <el-icon><Edit /></el-icon>
        <span>视频审核</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { Notebook, Edit } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import { useUserStoreWithOut } from '@/store/modules/user'
import { role } from '@/utils/globalOptions'

const userState = useUserStoreWithOut()

const route = useRoute()

defineProps<{
  isCollapse: boolean
}>()
</script>

<style lang="scss" scoped>
.sidebar-container {
  height: 100vh; // 改为100vh确保占满整个视口高度
  background-color: #304156;
  position: relative;
  width: 210px;
  transition: width 0.3s;
  display: flex;
  flex-direction: column; // 使用flex布局

  &.collapsed {
    width: 64px;
  }

  .title-container {
    height: 60px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #304156;
    cursor: default;
    flex-shrink: 0; // 防止标题被压缩

    .system-title {
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      margin: 0;
      white-space: nowrap;
      text-align: center;
    }
  }

  .sidebar-menu {
    border-right: none;
    flex: 1; // 占据剩余空间
    overflow-y: auto; // 添加垂直滚动
    overflow-x: hidden; // 隐藏水平滚动条

    // 自定义滚动条样式
    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #41546d;
      border-radius: 3px;
    }

    &::-webkit-scrollbar-track {
      background-color: #304156;
    }
  }
}

:deep(.el-menu) {
  border-right: none;
}

:deep(.el-menu--collapse) {
  width: 64px;
}

:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
  height: 50px;
  line-height: 50px;

  &:hover {
    background-color: #263445 !important;
  }

  .el-icon {
    font-size: 18px;
    margin-right: 12px;
    vertical-align: middle;
  }

  span {
    font-size: 14px;
  }
}

:deep(.el-menu-item.is-active) {
  background-color: #263445 !important;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #409eff;
  }
}

:deep(.el-sub-menu.is-active) {
  .el-sub-menu__title {
    color: #409eff !important;
  }
}

// 折叠时隐藏滚动条
:deep(.el-menu--collapse) {
  &::-webkit-scrollbar {
    display: none;
  }
}
</style>
